<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 基本表单</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/static/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/static/admin/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/static/admin/css/animate.css" rel="stylesheet">
    <link href="/static/admin/css/style.css?v=4.1.0" rel="stylesheet">
    <!--<link rel="stylesheet" type="text/css" href="/static/admin/css/plugins/webuploader/webuploader.css">-->
    <!--<link rel="stylesheet" type="text/css" href="/static/admin/css/demo/webuploader-demo.css">-->
    <link rel="stylesheet" type="text/css" href="/static/admin/plugins/webupload/css/webuploader.css">
    <link rel="stylesheet" type="text/css" href="/static/admin/plugins/webupload/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/admin/plugins/webupload/css/demo.css">
    <link rel="stylesheet" href="/static/admin/layui.css"  media="all">
</head>

<body class="gray-bg">
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>商品添加
                    <small>"*"代表必填选项,请认真填写</small>
                </h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">

                <form method="post" class="form-horizontal" action="{:url('admin/goods/save')}">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所属栏目:</label>

                        <div class="col-sm-2">

                            <select class="form-control m-b" name="cid">
                                {foreach $cData as $v}
                                <option value="{$v.id}">{$v._cname}</option>
                                {/foreach}
                            </select>


                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" >商品名称:</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="title">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" >市场价:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="price">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" >官方定价</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="old_price">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" >库存:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="count"> <span
                                class="help-block m-b-none"></span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">已售出:</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="sale">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别:</label>

                        <div class="col-sm-10">
                            <div class="radio i-checks">
                                <label class="">
                                    <div class="iradio_square-green" style="position: relative;"><input type="radio" value="1" name="sex" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                                    <i></i> 男款
                                </label>
                            </div>
                            <div class="radio i-checks">
                                <label class="">
                                    <div class="iradio_square-green" style="position: relative;"><input type="radio" value="2" name="sex" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                                    <i></i> 女款
                                </label>
                            </div>
                            <div class="radio i-checks">
                                <label class="">
                                    <div class="iradio_square-green" style="position: relative;"><input type="radio" value="3" name="sex" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                                    <i></i> 男童
                                </label>
                            </div>
                            <div class="radio i-checks">
                                <label class="">
                                    <div class="iradio_square-green" style="position: relative;"><input type="radio" value="4" name="sex" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                                    <i></i> 女童
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">列表封面:</label>

                        <div class="col-sm-10">
                            <div class="demo"> 
                                <div id="uploadimg">
                                    <div id="fileList" class="uploader-list" style="display: flex;"></div>
                                    <input type="text"id="list" hidden name="list_pic">
                                    <div id="imgPicker">选择图片</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>

                  <!--  <div class="form-group">
                        <label class="col-sm-2 control-label">商品预览图:</label>
                        <div class="col-sm-10" >

                            <div id="uploader">
                                <div class="queueList">
                                    <div id="dndArea" class="placeholder">
                                        <div id="filePicker"></div>
                                        <p>或将照片拖到这里，单次最多可选10张</p>
                                    </div>
                                </div>
                                <div class="statusBar" style="display:none;">
                                    <div class="progress">
                                        <span class="text">0%</span>
                                        <span class="percentage"></span>
                                    </div><div class="info"></div>
                                    <div class="btns">
                                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--<input type="text" name="pic_path pic_path'" >
                        <p id="p"></p>
                    </div>-->

                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品描述:</label>

                        <div class="col-sm-10">
                            <script id="container" name="description" type="text/plain">

                         </script>
                            <!-- 配置文件 -->
                            <script type="text/javascript" src="/static/admin/plugins/ueditor/ueditor.config.js"></script>
                            <!-- 编辑器源码文件 -->
                            <script type="text/javascript" src="/static/admin/plugins/ueditor/ueditor.all.js"></script>
                            <!-- 实例化编辑器 -->
                            <script type="text/javascript">
                                var ue = UE.getEditor('container');
                            </script>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>

                    <div id="app">
                        <textarea name="goods_attribute" hidden cols="30" rows="10" v-text="spec"></textarea>
                      <div v-for="(v,k) in spec">
                        <button class="btn btn-xs btn-danger " type="button">
                            <span class="bold" @click.prevent="del(k)">删除</span>
                        </button>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">颜色:</label>

                            <div class="col-sm-2">
                                <input type="text" class="form-control" v-model="v.color">
                            </div>
                            <label class="col-sm-2 control-label">尺寸:</label>

                            <div class="col-sm-2">
                                <input type="text" class="form-control" v-model="v.size">
                            </div>
                            <label class="col-sm-2 control-label">库存量:</label>

                            <div class="col-sm-2">
                                <input type="text" class="form-control" v-model="v.repertory">
                            </div>
                        </div>

                        <div class="form-group">
                              <label class="col-sm-2 control-label">商品预览图:</label>
                              <div class="col-sm-10" >

                                  <div id="uploader">
                                      <div class="queueList">
                                          <div id="dndArea" class="placeholder">
                                              <div id="filePicker"></div>
                                              <p>或将照片拖到这里，单次最多可选10张</p>
                                          </div>
                                      </div>
                                      <div class="statusBar" style="display:none;">
                                          <div class="progress">
                                              <span class="text">0%</span>
                                              <span class="percentage"></span>
                                          </div><div class="info"></div>
                                          <div class="btns">
                                              <div ></div><div class="uploadBtn">开始上传</div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <!--<input type="text" name="pic_path pic_path'" >-->
                              <p id="p"></p>
                          </div>


                      </div>--
                        <button class="btn btn-xs btn-success " type="button" @click.prevent="add()">
                            <span class="bold" >添加一项</span>
                        </button>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="hr-line-dashed"></div>


                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-2">
                            <button class="btn btn-primary" type="submit">保存内容</button>
                            <button class="btn btn-white" type="submit" >取消</button>
                        </div>
                    </div>

                </form>

            </div>
        </div>
    </div>
</div>
</div>


<!-- 全局js -->
<script src="/static/admin/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/admin/js/bootstrap.min.js?v=3.3.6"></script>

<!--<script src="/static/admin/js/plugins/webuploader/webuploader.min.js"></script>-->

<!--<script src="/static/admin/js/demo/webuploader-demo.js"></script>-->

<!-- 自定义js -->
<script src="/static/admin/js/content.js?v=1.0.0"></script>

<!-- iCheck -->
<script src="/static/admin/js/plugins/iCheck/icheck.min.js"></script>
<script src="/static/admin/js/vue.js"></script>


<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });


    });
</script>
<!-- layerDate plugin javascript -->
<script type="text/javascript" src="/static/admin/plugins/webupload/js/webuploader.min.js"></script>
<script type="text/javascript" src="/static/admin/plugins/webupload/js/upload.js"></script>
<script src="static/admin/js/layui.js" charset="utf-8"></script>

<script>
    new Vue({
        el:'#app',
        data:{
            spec:[
                {size:'',repertory:'',color:''}
            ],
        },
        methods:{
            add(){
                var html = {color:'',repertory:'',size:''};
                this.spec.push(html);
            },
            del(k){
                this.spec.splice(k,1);
            }
        }
    });
    //上传图片
    // 初始化Web Uploader
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,

        // swf文件路径
        swf: 'js/Uploader.swf',

        // 文件接收服务端。
        server: '/index.php/component/Upload/up',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#imgPicker',

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        var $list = $("#fileList"),
            $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail" style="margin: 0 10px 10px 0">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
            ),
            $img = $li.find('img');


        // $list为容器jQuery实例
        $list.append( $li );

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        }, 100, 100 );
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress span');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>')
                .appendTo( $li )
                .find('span');
        }

        $percent.css( 'width', percentage * 100 + '%' );
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadAccept', function( file, response ) {
        $( '#'+file.id ).addClass('upload-state-done');
        $( '#list' ).val(response.path);
        console.log(response.path)
    });

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败');
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });








</script>






<!-- Web Uploader -->
<script type="text/javascript">
    // 添加全局站点信息
    var BASE_URL = '/static/admin/js/plugins/webuploader';
</script>


<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<!--统计代码，可删除-->

</body>

</html>
